<template>
    <div class="father">
        <div class="content">
            <!-- 功能：使用插槽实现每列样式不同 -->
            <Carlet>
                <!-- 2、使用 v-slot接收子组件插槽内容 ★  -->
                <!-- <template v-slot:lxySlot="paramLxy"> 作用域插槽使用具名方式 -->
                <template v-slot="paramLxy">
                    <h1>{{ paramLxy.bigTitle }}</h1>
                    <ul>
                        <li v-for="item in paramLxy.dataAlternates" :key="item.id">
                            {{item.title}}
                        </li>
                    </ul>
                </template>
            </Carlet>
            <Carlet>
                <template v-slot="paramLxy">
                    <h1>{{ paramLxy.bigTitle }}</h1>
                    <ol>
                        <li v-for="item in paramLxy.dataAlternates" :key="item.id">
                            {{item.title}}
                        </li>
                    </ol>
                </template>
            </Carlet>
            <Carlet>
                <!-- v-slot等价于#default -->
                <template #default="{bigTitle,dataAlternates}">
                    <h1>{{bigTitle }}</h1>
                    <h4 v-for="item in dataAlternates" :key="item.id">
                        {{item.title}}
                    </h4>
                </template>
            </Carlet>
        </div>
    </div>
</template>
<script setup lang="ts">
import {ref, reactive} from 'vue'
import Carlet from './Carlet.vue';
//64集
// 总结:【作用域】插槽是为了解决 数据在子这，由父决定根据数据生成的结构。经常出现在ui组件库中
</script>
<style scoped>
.father{
    /* padding: 50px; */
    width: 100vw;
    height: 100vh;
    background-color: rgb(240, 243, 55);
}
.content{
    display: flex;
}
h1{
    background-color: rgb(175, 43, 227);
    text-align: center;
    font-size: 25px;
}
</style>
